<template>
  <div class="box">
    <!-- 选择框 -->
    <div class="choice">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        label-position="top"
      >
        <!-- 职位名称/职业类型 -->
        <div class="form">
          <el-form-item
            label="职位名称 "
            prop="postname"
            style="margin-right: 42px"
          >
            <el-input
              v-model.trim="ruleForm.postname"
              placeholder="请输入职位名称"
              style="width: 600px"
            >
            </el-input>
          </el-form-item>
          <!-- 所属企业 -->
          <el-form-item label="所属企业 " prop="company">
            <el-select
              v-model.trim="ruleForm.company"
              placeholder="请选择所属企业"
              style="width: 600px"
              clearable
            >
              <el-option
                v-for="item in DataForm"
                :key="item.id"
                :label="item.ename"
                :value="item.ename"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <!-- 选择范围 -->
        <div class="form">
          <!--职业类型  -->
          <el-form-item
            label=" 职位类型"
            prop="type"
            style="margin-right: 42px"
          >
            <el-select
              v-model.trim="ruleForm.type"
              placeholder="请输入职业类型"
              style="width: 600px"
              clearable
            >
              <el-option label="全职" value="全职"></el-option>
              <el-option label="兼职" value="兼职"></el-option>
              <el-option label="实习生" value="实习生"></el-option>
              <el-option label="寒假工" value="寒假工"></el-option>
              <el-option label="暑假工" value="暑假工"></el-option>
              <el-option label="实习生" value="实习生"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="薪资范围 " required prop="date1">
            <el-col :span="10">
              <el-form-item prop="date1">
                <el-input
                  type="number"
                  v-model.trim="ruleForm.date1"
                  placeholder="最低"
                  :min="0"
                  :step="0.5"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1" class="line">-</el-col>
            <el-col :span="10">
              <el-form-item prop="date2">
                <el-input
                  type="number"
                  v-model.trim="ruleForm.date2"
                  placeholder="最高"
                  :min="0"
                  :step="0.5"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">K</el-col>
          </el-form-item>
        </div>
        <!-- 底部两个选择框 -->
        <div class="form">
          <el-form-item label="企业地址" prop="address">
            <el-cascader
              :options="pcaTextArr"
              v-model.trim="ruleForm.address"
              placeholder="请输入地址"
              style="width: 100%"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item
            label="详细地址"
            style="margin-right: 42px"
            prop="address"
          >
            <el-input
              v-model.trim="DetAddress"
              placeholder="请输入详细地址"
              style="width: 400px"
            >
            </el-input>
          </el-form-item>
          <!-- 学历要求 -->
          <el-form-item label="学历要求" prop="degree" clearable>
            <el-select
              v-model.trim="ruleForm.degree"
              placeholder="请输入学历要求"
              style="width: 100%"
              clearable
            >
              <el-option label="不限" value="不限"></el-option>
              <el-option label="大专" value="大专"></el-option>
              <el-option label="本科" value="本科"></el-option>
              <el-option label="研究生" value="研究生"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- 职位描述 -->
        <quill-editor
          style="height: 200px; margin-bottom: 80px"
          v-model.trim="ruleForm.introduction"
          placeholder="请输入职位描述"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
          @ready="onEditorReady($event)"
        >
        </quill-editor>
      </el-form>
      <!-- 取消与确定按钮 -->
      <div class="buttondiv">
        <router-link to="/position">
          <el-button>取消</el-button>
        </router-link>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
// 地址
import { pcaTextArr } from "element-china-area-data";
import { postAdd, getCompanyName } from "../../api/position/index";
// 富文本编辑器
import { quillEditor } from "vue-quill-editor";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  // 富文本编辑器
  components: {
    quillEditor,
  },

  data() {
    return {
      // 富文本编辑器
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用 代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [
              {
                size: [
                  "12",
                  "14",
                  "16",
                  "18",
                  "20",
                  "22",
                  "24",
                  "28",
                  "32",
                  "36",
                ],
              },
            ], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、背景颜色
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["image", "video"], // 图像、视频
          ],
        },
        placeholder: "请输入职位描述",
      },

      // 下拉选择地址组件
      pcaTextArr,
      ruleForm: {
        // 职位名称
        type: "",
        // 职业类型
        postname: "",
        // 所属企业
        company: "",
        // 薪资
        salary: "",
        // 学历水平
        degree: "",
        // 地址
        address: [],
        // 职位描述
        introduction: "",
        // 最低工资
        date1: null,
        // 最高工资
        date2: null,
      },
      // 详细地址
      DetAddress: "",
      // 获取数据
      DataForm: [],
      // 表单验证规则
      rules: {
        type: [
          {
            required: true,
            message: "请输入职位名称",
            trigger: "blur",
          },
        ],
        postname: [
          { required: true, message: "请输入职业类型", trigger: "blur" },
        ],
        company: [
          { required: true, message: "请输入所属企业", trigger: "change" },
        ],
        degree: [{ required: true, message: "请输入学历", trigger: "blur" }],
        person: [{ required: true, message: "请输入地址", trigger: "blur" }],
        date1: [{ required: true, message: "请输入最低薪资", trigger: "blur" }],
        date2: [
          { required: true, message: "请输入最高薪资", trigger: "blur" },
          { validator: this.validate, trigger: "blur" },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "change" }],
        // introduction: [
        //   { required: true, message: "请输入职位描述", trigger: "blur" },
        // ],
      },
    };
  },
  mounted() {
    this.selectclin();
  },
  methods: {
    //获取数据
    async selectclin() {
      let res = await getCompanyName();
      // console.log("res.code", res.code !== null);

      if (res.code == 200) {
        console.log("res", res);

        this.DataForm = res.data;
        console.log("DataForm", this.DataForm);
      } else {
        this.$message.error("数据获取失败");
      }
    },
    // 验证最高薪资不能低于最低薪资
    validate(rule, value, callback) {
      const num = Number(this.ruleForm.date2);
      const num1 = Number(this.ruleForm.date1);
      if (num < num1) {
        callback(new Error("最高薪资不能低于最低薪资"));
      } else {
        callback();
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 生成薪资
          this.ruleForm.salary =
            this.ruleForm.date1 + "k" + "-" + this.ruleForm.date2 + "k";

          this.ruleForm.address =
            this.ruleForm.address.join(" -") + "-" + this.DetAddress;
          // 新增数据
          postAdd(this.ruleForm)
            .then((response) => {
              this.$message.success("提交成功");
              this.$router.push({ path: `/position` });
            })
            .catch((error) => {
              console.error("提交失败:", error);
            });
        } else {
          this.$message.error("提交失败");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  margin: 24px;
  padding: 32px;
  background-color: #fff;
  border-radius: 20px;
}
.header-container {
  box-sizing: border-box;
  width: 100%;
  height: 49px;
  border-bottom: 1px solid black;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  .topic {
    //字体样式
    font-size: 24px;
    font-weight: 700;
  }
}
.choice {
  width: 100%;
}
.form {
  display: flex;
  // flex-wrap: wrap;
}
.line {
  margin-left: 10px;
}
.buttondiv {
  display: flex;
  .el-button {
    margin-right: 20px;
  }
}
.return-button {
  color: #4b5563;
  &:hover {
    color: #409eff; // 悬浮时字体变蓝
  }
}
.ql-snow .ql-picker {
  height: 40px;
}
</style>